// ==UserScript==
// @name              十六番工具按钮
// @name:en           十六番工具按钮
// @namespace         http://16fan.com/
// @version           0.2
// @description       在网页上添加实用按钮，切换测试网址，去除图片webp支持
// @description:en    Add buttons
// @author            16fan.com
// @create            2018-09-03
// @lastmodified      2019-02-15
// @include           http*://*.16fan.com/*
// @include           http*://*.xiaofanlaile.com/*
// @noframes
// ==/UserScript==

(function() {
    'use strict';

    // 小番来了和16fan切换按钮
    var buttons = document.createElement("div");
    var switcher = document.createElement("a");
    var targetbutton = document.createElement("a");
    var imagebutton = document.createElement("a");
    var url = window.location.href;
    var webpStatus = window.sessionStorage.getItem("isSupportWebp") === "true";
    var isSupportWebp = !![].map && document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') === 0;

    // 链接是否全在本页打开
    var urlStatus = window.localStorage.getItem("urlTarget") === "true";

    switcher.innerHTML = /\.16fan\.com/i.test(url) ? "去 小番" : "去 16fan"; // 测试和线上切换按钮文字
    switcher.href = /\.16fan\.com/i.test(url) ? url.replace(".16fan.com", ".xiaofanlaile.com") : url.replace(".xiaofanlaile.com", ".16fan.com");
    switcher.style.display = "block";
    switcher.style.margin = "10px 0 0";
    switcher.style.color = "#fff";
    switcher.style.backgroundColor = "rgba(0,0,0,.3)";
    switcher.style.borderRadius = "4px";
    switcher.style.textAlign = "center";

    targetbutton.innerHTML = urlStatus ? "本页打开" : '默认'; // 所有a标签当前页面打开
    targetbutton.href = "javascript:;";
    targetbutton.style.display = "block";
    targetbutton.style.margin = "10px 0 0";
    targetbutton.style.color = "#fff";
    targetbutton.style.backgroundColor = "rgba(0,0,0,.3)";
    targetbutton.style.borderRadius = "4px";
    targetbutton.style.textAlign = "center";

    imagebutton.innerHTML = "七牛原图"; // 所有图片使用七牛原图
    imagebutton.href = "javascript:;";
    imagebutton.style.display = "block";
    imagebutton.style.margin = "10px 0 0";
    imagebutton.style.color = "#fff";
    imagebutton.style.backgroundColor = "rgba(0,0,0,.3)";
    imagebutton.style.borderRadius = "4px";
    imagebutton.style.textAlign = "center";

    if (isSupportWebp) {
        var webpButton = document.createElement("a");
        webpButton.innerHTML = webpStatus ? "禁用Webp" : "启用Webp";
        webpButton.href = "javascript:;";
        webpButton.style.display = "block";
        webpButton.style.color = "#fff";
        webpButton.style.backgroundColor = "rgba(0,0,0,.3)";
        webpButton.style.borderRadius = "4px";
        webpButton.style.textAlign = "center";
        buttons.appendChild(webpButton);
    }

    // 如果本页打开设置为真时，把页面所有链接target设置为_self
    if (urlStatus) {
        document.querySelectorAll('a').forEach(function (item) {
            item.setAttribute('target', '_self');
        });
    }

    buttons.className = "buttons";
    buttons.style.position = "fixed";
    buttons.style.fontSize = "16px";
    buttons.style.lineHeight = "32px";
    buttons.style.zIndex = 10000;
    buttons.style.width = "100px";
    buttons.style.top = "75px"; // 距离网页底部 50px，可修改
    buttons.style.right = "30px"; // 距离网页右边 30px，可修改
    // buttons.appendChild(switcher);
    // buttons.appendChild(targetbutton);
    buttons.appendChild(imagebutton);
    document.getElementsByTagName("body")[0].appendChild(buttons);

    /*webp按钮事件开始*/
    webpButton.addEventListener("click",function() {
        window.sessionStorage.setItem("isSupportWebp", webpStatus ? "false" : "true");
        window.location.reload();
    });
    /*按钮事件结束*/

    /*链接当前页打开按钮事件开始*/
    targetbutton.addEventListener("click",function() {
        urlStatus = !urlStatus;
        window.localStorage.setItem("urlTarget", urlStatus);
        targetbutton.innerHTML = urlStatus ? "本页打开" : '默认';
        if (urlStatus) {
            document.querySelectorAll('a').forEach(function (item) {
                item.setAttribute('target', '_self');
            });
        } else {
            window.location.reload();
        }
    });

    /*图片原图打开按钮事件开始*/
    imagebutton.addEventListener("click",function() {
        document.querySelectorAll('img.lazy').forEach(function (item) {
            item.getAttribute('src') && item.setAttribute('src', item.getAttribute('src').replace(/-\d+[a-z]*$|\?\S+$/ig, ''));
            item.getAttribute('data-src') && item.setAttribute('data-src', item.getAttribute('data-src').replace(/-\d+[a-z]*$|\?\S+$/ig, ''));
            item.getAttribute('data-original') && item.setAttribute('data-original', item.getAttribute('data-original').replace(/-\d+[a-z]*$|\?\S+$/ig, ''));
            item.getAttribute('data-webp') && item.setAttribute('data-webp', item.getAttribute('data-webp').replace(/-\d+[a-z]*$|\?\S+$/ig, ''));
        });
    });
    /*按钮事件结束*/
})();